<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="课程名称" prop="courseName">
        <el-input
          v-input-restrict
          v-model="queryParams.courseName"
          placeholder="请输入课程名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="岗位" prop="postIds">
        <el-select
          v-model="queryParams.postIds"
          placeholder="岗位"
          filterable
          style="width: 200px"
        >
          <el-option label="全部" :value="undefined" />
          <el-option
            v-for="dict in postOptions"
            :key="dict.postId"
            :label="dict.postName"
            :value="dict.postId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="创建人" prop="creatorName">
        <el-input
          v-input-restrict
          v-model="queryParams.creatorName"
          placeholder="请输入创建人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          v-preventReClick
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button
          v-preventReClick
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>

    <div class="commonMenu">
      <el-menu
        default-active="0"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="0">正式在用</el-menu-item>
        <el-menu-item index="1">已停用</el-menu-item>
      </el-menu>
    </div>

    <el-table v-loading="loading" :data="postList">
      <el-table-column
        show-overflow-tooltip
        label="课程名称"
        align="center"
        prop="courseName"
      />
      <!-- 课程封面 -->
      <el-table-column width="120" label="封面" align="center" prop="coursePic">
        <template slot-scope="scope">
          <el-image
            :src="
              scope.row.coursePic
                ? scope.row.coursePic
                : 'https://oss.metaxun.com/wx/zy/nocourse.png'
            "
            fit="cover"
            :width="120"
          />
        </template>
      </el-table-column>
      <!-- /* 查询课程列表 0.已审核 1.禁用 2.待提交 3.待初审核 4.待复审核 5.已驳回 */
      /* 查询课程列表 0.已启用 1.已停用 */ -->
      <el-table-column label="课时(h)" align="center" prop="studyTime">
        <template slot-scope="scope">
          {{ scope.row.studyTime ? scope.row.studyTime : "--" }}
        </template>
      </el-table-column>
      <el-table-column label="岗位" align="center" prop="postNames" />
      <el-table-column label="创建人" align="center" prop="creatorName" />

      <el-table-column label="创建时间" align="center" prop="createTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最后操作时间" align="center" prop="updateTime"
        ><template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="220"
      >
        <!-- // 0.启用 1.禁用 2.待提交 3.待分院审核 4.待学校审核 5.已驳回-->
        <template slot-scope="scope">
          <el-button
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleUpdate(scope.row, 'detail', 'course')"
            >课程详情</el-button
          >

          <el-button
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleDateDetail(scope.row)"
            >数据详情</el-button
          >

          <el-button
            v-preventReClick
            size="mini"
            type="text"
            icon="el-icon-open"
            @click="handleSwitch(scope.row)"
          >
            {{ scope.row.status == 0 ? "停用" : "启用" }}
          </el-button>

          <el-button
            icon="el-icon-delete"
            size="mini"
            type="text"
            v-if="scope.row.status == 1"
            style="color: #e95756"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  copyCourseTemporary,
  copyCourse,
  listPost_course,
  listCourseTemporary,
  editCourseTemporary,
  revokeCourseTemporary,
  delCourseTemporary,
  getPost_course,
  delPost_course,
  addPost_course,
  updatePost_course,
  orderCourseList,
} from "@/api/course/course";
import {
  listPost_teacher,
  getCreatorList,
} from "@/api/schoolOrganization/teacher";
import { listPost_reviewConfig } from "@/api/configuration/auditConfiguration";
import setTrainerDia from "./components/setTrainerDia.vue";
import { listPost } from "@/api/system/post";
export default {
  name: "Course",
  dicts: ["sys_normal_disable"],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位选项
      postOptions: [],
      // 岗位表格数据
      postList: [],
      // level
      level: [],

      queryParams: {
        pageNum: 1,
        pageSize: 10,
        postIds: undefined,
        creatorName: undefined,
        courseName: undefined,
        status: 0,
        schoolId: undefined,
      },
    };
  },
  activated() {
    this.getList();
  },
  created() {
    this.getList();
    this.getPostList();
  },
  methods: {
    /* 查询课程列表 0.已审核 1.禁用 2.待提交 3.待初审核 4.待复审核 5.已驳回 */
    /* 查询课程列表 0.已启用 1.已停用 */
    /* role  hr 人力 user 普通员工 sa 门店管理员 ts 培训专员 qcs 品控专员 qcm 品控经理 gm 总经理 dgm 副总经理*/
    getList() {
      this.loading = true;
      listPost_course(this.queryParams).then((response) => {
        this.postList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /* 获取岗位 */
    getPostList() {
      listPost({
        pageNum: 1,
        pageSize: 9999,
      }).then((response) => {
        this.postOptions = response.rows;
      });
    },
    // 状态选择 查询列表
    handleSelect(key, keyPath) {
      this.queryParams.status = key;
      this.getList();
    },

    // 停用 启用按钮
    handleSwitch(row) {
      if (row.status == 0) {
        this.$confirm(
          `确定${row.status == 0 ? "停用" : "启用"}【${row.courseName}】吗?${
            row.status == 0 ? "停用后员工将无法学习课程！" : "启用"
          }`,
          "停用确认",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            let data = JSON.parse(JSON.stringify(row));
            data.status = row.status == 0 ? 1 : 0;
            updatePost_course(data).then((response) => {
              this.$modal.msgSuccess("操作成功");
              this.open = false;
              this.getList();
            });
          })
          .catch(() => {});
      } else {
        let data = JSON.parse(JSON.stringify(row));
        data.status = row.status == 0 ? 1 : 0;
        updatePost_course(data).then((response) => {
          this.$modal.msgSuccess("操作成功");
          this.open = false;
          this.getList();
        });
      }
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids =
        (this.status == "temporary2" ? row.id : row.courseId) || this.ids;
      this.$confirm(
        `确定删除【${row.courseName}】吗?删除后将同步删除已停用的正式课程此操作不可恢复！`,
        "删除确认",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          if (this.status == "temporary2") {
            await delCourseTemporary(ids);
          } else {
            await delPost_course(ids);
          }
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 新增按钮操作 */
    handleAdd() {
      this.$router.push({
        path: "/course/addCourse",
        query: {
          type: "add",
        },
      });
    },
    /* 数据详情按钮 */
    handleDateDetail(row) {
      this.$router.push({
        path: "/course/courseDataDetail",
        query: {
          courseId: row.courseId,
          schoolCourseId: row.schoolCourseId,
        },
      });
    },

    /** 审核和课程详情 */
    handleUpdate(row, type, status) {
      this.$router.push({
        path: "/course/officialCourseDetail",
        query: {
          courseId: row.courseId,
          type: type,
          status: status,
          from: "course_offical",
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .commonMenu {
  padding: 0 0 8px 0;
}
::v-deep .el-menu-item:hover {
  border-bottom: 1px solid #e6e6e6 !important;
}

::v-deep .el-menu--horizontal > .el-menu-item.is-active:hover {
  border-bottom: 2px solid #11a983 !important;
}
</style>
